<template>
  <div>
    <!-- 板块信息 -->
    <div class="plates">
      <Plate
        v-for="(item, index) in chartInfo"
        :key="index"
        :isCheck="checkedIndex === index"
        v-bind="item"
        @click.native="handleClick(index)"
      ></Plate>
    </div>
    <!-- 连板天梯 -->
    <div class="ztc">
      <div class="ztc-header">
        <Block title="涨停池" class="ztc-title"></Block>
        <div class="switch" @click="switchList" v-if="checkedIndex === 'limit_up_all'">
          <img src="@/assets/img/switch.svg" class="switch-img" alt="" />
          <div class="switch-text">{{ switchText }}</div>
        </div>
      </div>
      <div v-if="tableData.length > 0 || footerOption.type === 'loading'">
        <ZtcStockList
          v-show="showStockList || checkedIndex !== 'limit_up_all'"
          :tableData="tableData"
          :footerOption="footerOption"
        ></ZtcStockList>
        <!-- 连板天梯业务组件 -->
        <ContinuousLimitupLadder
          id="limitup"
          v-show="!showStockList && checkedIndex === 'limit_up_all'"
          :nowDate="nowDate"
        ></ContinuousLimitupLadder>
      </div>
      <atom-empty type="search" v-else title="该日期暂无数据" />
    </div>
  </div>
</template>

<script>
import Block from '@/components/common/Block.vue';
import Plate from '@/components/Ztfp/Plate.vue';
import ZtcStockList from '@/components/Ztfp/ZtcStockList.vue';
import ContinuousLimitupLadder from '@/lib/ContinuousLimitupLadder/index.vue';
import { reqChartInfo, reqLimitupZtfp } from '@/apis/index';
import { errorReport, getBoardTag } from '@/scripts/tools.js';

export default {
  name: 'Lbtt',
  components: {
    Block,
    Plate,
    ContinuousLimitupLadder,
    ZtcStockList,
  },
  props: {
    nowDate: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      footerOption: {
        type: 'loading',
      },
      showStockList: true,
      switchText: '连板天梯',
      // 当前选中的index
      checkedIndex: 'limit_up_all',
      // 板块信息
      chartInfo: {
        limit_up_all: {
          name: '全部',
          numKey: 'all',
          plateData: {
            num: { label: '数量', value: '--' },
          },
        },
        limit_up_continue_one_day: {
          name: '一板',
          numKey: '1',
          plateData: {
            num: { label: '数量', value: '--' },
          },
        },
        limit_up_continue_two_day: {
          name: '二板',
          numKey: '2',
          plateData: {
            num: { label: '数量', value: '--' },
            radio: { label: '晋级率', value: '--' },
          },
        },
        limit_up_continue_three_day: {
          name: '三板',
          numKey: '3',
          plateData: {
            num: { label: '数量', value: '--' },
            radio: { label: '晋级率', value: '--' },
          },
        },
        limit_up_continue_high: {
          name: '高度板',
          numKey: 'high',
          plateData: {
            num: { label: '数量', value: '--' },
            radio: { label: '晋级率', value: '--' },
          },
        },
      },
      // 涨停池和板块信息全量数据
      allData: {},
      allChartInfo: {},
      // 某日全部/一/二/三/高度板数据
      limitupPool: {
        limit_up_all: [],
        limit_up_continue_one_day: [],
        limit_up_continue_two_day: [],
        limit_up_continue_three_day: [],
        limit_up_continue_high: [],
      },
      PLATEMAP: {
        1: 'limit_up_continue_one_day',
        2: 'limit_up_continue_two_day',
        3: 'limit_up_continue_three_day',
      },
      // 渲染表格数据
      tableData: [],
      // 最新数据日期
      defaultDate: '',
    };
  },
  methods: {
    // 获取板块信息
    getChartInfo() {
      reqChartInfo()
        .then(res => {
          this.allChartInfo = res.data;
          const chartList = this.allChartInfo[this.nowDate]?.chartList || [];
          this.dealChatInfo(chartList);
        })
        .catch(err => {
          errorReport({
            name: `连板天梯板块接口报错，${err.name}`,
            message: err.message,
            stack: err.stack,
          });
        });
    },
    // 获取涨停池数据
    getLimitupPool() {
      reqLimitupZtfp()
        .then(res => {
          const keys = Object.keys(res.data);
          // 获取最新数据对应日期
          this.defaultDate = keys[keys.length - 1];
          if (this.nowDate > this.defaultDate || this.nowDate === '') {
            this.$emit('setDefaultDate', this.defaultDate);
          }
          this.allData = res.data;
          this.dealStockData(this.allData[this.nowDate || this.defaultDate] || []);
        })
        .catch(err => {
          errorReport({
            name: `涨停复盘接口报错，${err.name}`,
            message: err.message,
            stack: err.stack,
          });
        })
        .finally(() => {
          this.footerOption.type = '';
        });
    },
    // 前端筛选全部/一/二/三/高度板数据
    dealStockData(data) {
      this.limitupPool.limit_up_all = [];
      this.limitupPool.limit_up_continue_one_day = [];
      this.limitupPool.limit_up_continue_two_day = [];
      this.limitupPool.limit_up_continue_three_day = [];
      this.limitupPool.limit_up_continue_high = [];
      if (data.length !== 0) {
        data.forEach(item => {
          const { stockContinueLimitUpDays, stockname, time1, ztgl, ztyy, kjb, lt, stockcode, date, marketcode } = item;
          const tags = [];
          const tag = getBoardTag(kjb, lt);
          if (tag !== '') {
            tags.push(tag);
          }
          const minLocation = 5;
          const itemObj = {
            days: stockContinueLimitUpDays,
            stockName: stockname,
            time: time1.substring(0, minLocation),
            ztgl: Number(ztgl),
            reason: ztyy,
            askText: `AI分析${stockname}涨停强度`,
            tags: tags,
            date,
            stockCode: stockcode,
            marketid: marketcode,
          };
          if(this.PLATEMAP[item.stockContinueLimitUpDays]){
            this.limitupPool[this.PLATEMAP[item.stockContinueLimitUpDays]].push(itemObj);
          }else{
            this.limitupPool.limit_up_continue_high.push(itemObj);
          }
          this.limitupPool.limit_up_all.push(itemObj);
        });
      }
      this.tableData = this.limitupPool.limit_up_all;
      // 默认排序
      this.tableData.sort((a, b) => b.days - a.days);
    },
    // 处理板块信息接口返回数据
    dealChatInfo(chartList) {
      if (chartList.length > 0) {
        chartList.forEach(chartItem => {
          const chartKey = chartItem.chartKey;
          this.chartInfo[chartKey].plateData.num.value = chartItem.num;
          if (chartItem.ratio) {
            this.chartInfo[chartKey].plateData.radio.value = Number(chartItem.ratio).toFixed(0) || '--';
          }
        });
      } else {
        // 将plateData属性的所有value置空
        Object.keys(this.chartInfo).forEach(key => {
          const obj = this.chartInfo[key].plateData;
          Object.keys(obj).forEach(subKey => {
            obj[subKey].value = '--';
          });
        });
      }
    },
    // 切换图表
    switchList() {
      window.hxmPageStat(`${_Global.stat.pageId}_ztfp_modeSwitch`, { url_ver: _Global.stat.url_ver });
      this.showStockList = !this.showStockList;
      this.switchText = this.showStockList ? '连板天梯' : '列表模式';
    },
    // 切换板块
    handleClick(index) {
      this.checkedIndex = index;
      this.tableData = this.limitupPool[index];
    },
  },
  mounted() {
    window.hxmPageStat(`${_Global.stat.pageId}_ztfp_lbtt`, { url_ver: _Global.stat.url_ver });
  },
  activated() {
    this.getLimitupPool();
    this.getChartInfo();
  },
  watch: {
    nowDate(val) {
      this.dealStockData(this.allData[val] || []);
      const chartList = this.allChartInfo[val]?.chartList || [];
      this.dealChatInfo(chartList);
    },
  },
};
</script>

<style lang="less" scoped>
.plates {
  overflow-x: scroll;
  display: flex;
  background-color: #fff;
  padding: 10px 0 24px 32px;
  padding-left: 32px;
  padding-top: 10px;
}
.plates::-webkit-scrollbar {
  display: none; /*隐藏滚动条*/
}
.ztc {
  margin-top: 16px;
  width: 100%;
  background-color: #fff;

  .ztc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /deep/ .block {
      padding-bottom: 0;
    }
    /deep/ .ztc-title {
      margin-top: 0;
      margin-bottom: 0;
    }
    .switch {
      display: flex;
      align-items: center;
      width: 152px;
      height: 48px;
      background: rgba(0, 0, 0, 0.04);
      border-radius: 4px;
      margin-right: 32px;
      .switch-img {
        width: 28px;
        height: 28px;
        margin: 0 4px 0 8px;
      }
      .switch-text {
        font-size: 24px;
        color: #ff2436;
        line-height: 32px;
      }
    }
  }
}
</style>
